<template>
  <div class="w-full overflow-hidden">
    <el-menu
        default-active="1"
        class="el-menu-vertical-demo h-full"
        @select="handleSelect"
        style="width: 80px"
    >
      <div>
        <div class="w-20 h-20 flex justify-center items-center">
          <el-avatar :size="50" :src="user.avater"/>
        </div>
      </div>
      <el-menu-item index="1">
        消息
      </el-menu-item>
      <el-menu-item index="2">
        联系人
      </el-menu-item>
      <el-menu-item index="2">
        视频
      </el-menu-item>
    </el-menu>
    <div class="h-64"></div>
  </div>
</template>

<script setup>
import {useIndexStore, useUserStore} from "~/store";
import {storeToRefs} from "pinia";
import {toggle} from "~/func/toggle";
const is_dark = ref(false)

const userStore = useUserStore()
const indexStore = useIndexStore()
const {user} = storeToRefs(userStore)
const handleSelect = (key) => {
  console.log(key)
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
